<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Gamut mapping tests</title>

<link rel="stylesheet" href="https://htest.dev/htest.css" crossorigin />
<script src="https://htest.dev/htest.js" crossorigin></script>
<link rel="stylesheet" href="style.css" />

<script src="../dist/color.global.js"></script>
<script>
function gamutTest(toSpace, args) {
	let td = document.currentScript.parentNode.previousElementSibling;

	$out(() => {
		let color = new Color(td.textContent);
		let color2 = color.to(toSpace);
		return color2.toString({inGamut: args, precision: null});
	});
}
</script>

</head>
<body data-epsilon=".01">

<h1>Gamut mapping Tests</h1>
<p>These tests check how coords are shrunk to smaller gamuts.</p>

<section>
	<h1>P3 primaries to sRGB</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1,2,3">
		<tr title="Using chroma reduction">
			<td>color(display-p3 1 0 0)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(98.20411139286732% 21.834053137266363% 0%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 1 0 0)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(100% 0% 0%)
			</td>
		</tr>
		<tr title="Using clipping">
			<td>color(display-p3 1 0 0)</td>
			<td>
				<script>gamutTest("srgb", {method: "clip"});</script>
			</td>

			<td>
				rgb(100% 0% 0%)
			</td>
		</tr>
		<tr title="Using chroma reduction">
			<td>color(display-p3 0 1 0)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(0% 99.7921930734509% 0%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 0 1 0)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(0% 100% 0%)
			</td>
		</tr>
		<tr title="Using clipping">
			<td>color(display-p3 0 1 0)</td>
			<td>
				<script>gamutTest("srgb", {method: "clip"});</script>
			</td>

			<td>
				rgb(0% 100% 0%)
			</td>
		</tr>
		<tr title="Using chroma reduction">
			<td>color(display-p3 0 0 1)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(0% 0% 100%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 0 0 1)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(0% 0% 100%)
			</td>
		</tr>
		<tr title="Using chroma reduction">
			<td>color(display-p3 1 1 0)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(100% 99.45446271521069% 0%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 1 1 0)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(100% 100% 0%)
			</td>
		</tr>
		<tr title="Using chroma reduction">
			<td>color(display-p3 0 1 1)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(0% 100% 98.93709142382755%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 0 1 1)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(0% 100% 100%)
			</td>
		</tr>
		<tr title="Using chroma reduction">
			<td>color(display-p3 1 0 1)</td>
			<td>
				<script>gamutTest("srgb");</script>
			</td>
			<td>
				rgb(100% 8.637212218104592% 98.22133121285436%)
			</td>
		</tr>
		<tr title="Using HSL saturation reduction">
			<td>color(display-p3 1 0 1)</td>
			<td>
				<script>gamutTest("srgb", {method: "hsl.s"});</script>
			</td>
			<td>
				rgb(100% 0% 100%)
			</td>
		</tr>
	</table>
</section>


<script src="./reftests.js" type="module"></script>

</body>
</html>
